<template>
	<view class="container">



		<view class="mainBg">
			<image src="../../../../../static/icon/img_girl.png" style="width:100%;"></image>
			<!--服务详情-->
			<view class="content">
				<view style="padding:50rpx">
					<view><text class="wagesText">80</text><text class="timeText">/时</text></view>
					<view class="contentText">提供线下一对一锻炼服务</view>
				</view>
				<!--其他内容-->
				<view class="itemCenter fwnrList">
					<text class="margLeft">限制地区</text>
					<text class="fwnrRight" style="color: #929397;">秀洲区，嘉善县</text>
				</view>
				<!--picker--><!-- 	<image class="rightBackAddrImg" src="../../../../../static/icon/icon_back.png"></image> -->
				<view style="height: 30rpx;"></view>
				<view class="itemCenter fwnrList">
					<text class="margLeft">规格</text>
					<picker @change="bindPickChangeTime" mode="selector" :range="array" range-key="name" :value="index"
						class="fwnrRight">
						<view>已选择“{{timeList[index].name}}”</view>
					</picker>

				</view>
				<view class="itemCenter fwnrList">
					<text class="margLeft">达人</text>
					<picker @change="bindPickChangePerson" mode="selector" :range="personList" range-key="name"
						:value="index" class="fwnrRight">
						<view>已选择“{{personList[index].name}}”</view>
					</picker>

				</view>
				<view class="drsl">
					<text>达人（</text><text>{{count}}</text><text>）</text>
				</view>

				<!--达人列表-->
				<scroll-view class="nav-scroll" scroll-x="true" style="white-space: nowrap;">
					<view v-for="(item, index) in personList" :key="index" @tap="switchTab(index)"
						:class="[currentIndex==index?'active':'nav-item']">
						<!--图片人像部分-->
						<view :style="{backgroundImage:'url(' + item.img + ')'}" class="personImgItem">

							<view
								style="background-image: url('../../../../../static/icon/icon_state.png');background-repeat: no-repeat; background-position: center;"
								class="child-view_top" v-if="item.img!=''">
								<text class="stateTextItem"><text style="color: #4BFE75;margin-left:-5rpx">・
									</text>{{item.state==1?'空闲':'忙碌'}}</text>
							</view>

						</view>
						<!--文字描述部分-->
						<view class="personTextItem">
							<text class="nameItem">{{item.name}}</text>
							<text class="contentItem">好评率{{item.good}}</text>
						</view>
					</view>
				</scroll-view>

				<!--评价部分-->
				<view class="itemCenter">
					<text class="margLeftPJ">用户评价</text>
					<image class="rightBackAddrImg" src="../../../../../static/icon/icon_back.png"></image>
				</view>
				<!--评价列表-->
				<view v-for="(item, index) in personList.slice(0,2)" class="orderListBg"
					:style="index>0?'margin-top: 100rpx;':''">

					<view class="itemCenter">

						<image class="itemImg" :src="item.img"></image>
						<view>
							<view class="itemOneText">{{item.type}}</view>
							<view class="itemTwoText">2天前</view>
						</view>
					</view>
					<view class="itemCenter">
						<image src="" class="itemImg" />
						<text class="itemTwoText">小雨技师在锻炼这块非常专业，对待我这么一个新手也非常有耐心，非常有她的一个方法，出来这么运动一下，感觉身心都愉悦了。</text>
					</view>
				</view>

				<!--预约按钮-->

				<view class="btnView">
					<button class="exchange-btn">立即预约</button>
				</view>
			</view>




			<!--底部-->
			<!--预约弹窗-->
			<view class="btmBg">
				<view style="text-align: center;padding-top: 20rpx;" class="btmTextTitle">预约选择<text
						style="position: absolute;right: 20rpx;">×</text></view>
				<view class="btmTextTitle" style="margin-left: 40rpx;">
					规格
				</view>
				<view class="twoModeleClass">
					<view v-for="(item,index) in specificationsList" class="twoModeleItem">
						<text @click="specificationsChoose(item)"
							:class="[specificationsIndex==index?'specificationsIndexActive':'specificationsIndexActiveNo']">{{item.text}}</text>
					</view>
			
				</view>
				<view class="drsl">
					<text>达人（</text><text>{{count}}</text><text>）</text>
				</view>
				<scroll-view class="nav-scroll" scroll-x="true" style="white-space: nowrap;">
					<view v-for="(item, index) in personList" :key="index" @tap="switchTab(index)"
						:class="[currentIndex==index?'active':'nav-item']">
						<view :style="{backgroundImage:'url(' + item.img + ')'}" class="personImgItem">
			
							<view
								style="background-image: url('../../../../../static/icon/icon_state.png');background-repeat: no-repeat; background-position: center;"
								class="child-view_top" v-if="item.img!=''">
								<text class="stateTextItem"><text style="color: #4BFE75;margin-left:-5rpx">・
									</text>{{item.state==1?'空闲':'忙碌'}}</text>
							</view>
			
						</view>
						<view class="personTextItem">
							<text class="nameItem">{{item.name}}</text>
							<text class="contentItem">好评率{{item.good}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="btnView">
					<button class="exchange-btn">立即下单</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeList: [{
						name: "1小时20元"
					},
					{
						name: "2小时39元"
					},
					{
						name: "3小时85元"
					}
				],
				personList: [{
						name: '小雨',
						type: '健身达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../../../static/icon/img_girl.png',
						good: '99%'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../../../static/icon/img_girl.png',
						good: '99%'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../../../static/icon/img_girl.png',
						good: '99%'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../../../static/icon/img_girl.png',
						good: '99%'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../../../static/icon/img_girl.png',
						good: '99%'
					}
				],
				index: 0,
				count: 10,
				specificationsList: [{
						text: '1小时90'
					},
					{
						text: '1小时90'
					},
					{
						text: '1小时90'
					},
					{
						text: '1小时90'
					},
					{
						text: '1小时90'
					},
				],
				specificationsIndex: 0
			}
		},
		onLoad() {
			let specificationsList = this.specificationsList
			let remainder = 3 - (specificationsList.length % 3);

			for (let i = 0; i < remainder; i++) {
				specificationsList.push({
					text: ''
				})
			}
			this.specificationsList = specificationsList

		},
		methods: {
			bindPickChange(e) {
				// 改变当前选择的值
				this.index = e.detail.value;
			},
			specificationsChoose(item) {
				console.log(1)
				this.specificationsIndex=item.index
			}
		}
	}
</script>

<style>
	.container {
		background-color: #FFFDFC;
		display: flex;
		flex-direction: column;
		/* height: 100%; */
		min-height: 150vh;
	}

	.wagesText {
		color: #F77E32;
		font-family: DIN;
		font-size: 30px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
		/* 53.333% */
	}

	.timeText {
		color: #040B29;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 650;
		line-height: 16px;
		/* 114.286% */
	}

	.contentText {
		color: #040B29;
		/* Pingfang SC/H3/Meduim */
		font-family: "PingFang SC";
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin-top: 40rpx;
	}

	.mainBg {
		/* background-color: white;
		position: absolute;
		top: 200rpx; */
		flex: 1;
	}

	.itemCenter {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
	}

	.margLeft {
		margin-left: 20px;
		color: #929397;
		font-family: "Alibaba PuHuiTi";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.fwnrRight {
		position: absolute;
		right: 20rpx;
		color: #040B29;
		text-align: right;
		font-family: "Alibaba PuHuiTi";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 16px;
		/* 133.333% */
	}

	.rightBackAddrImg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
	}

	.drsl {
		color: #3F2813;

		font-family: "Alibaba PuHuiTi";
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		margin-left: 20px;
		margin-top: 70rpx;
	}

	.nav-scroll {
		white-space: nowrap;
		width: 100%;
		margin-top: 15rpx;
	}

	.nav-item {
		display: inline-block;
		color: #929397;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		padding: 10px;
		margin-right: 10px;
		text-align: center;
		line-height: 20px;
		cursor: pointer;
	}

	.nav-item:last-child {
		margin-right: 0;
	}

	.personImgItem {
		width: 167px;
		height: 166px;
		flex-shrink: 0;
		position: relative;
		background-repeat: no-repeat;
		background-position: center;
	}

	.child-view {
		width: 86px;
		height: 20px;
		position: absolute;
		/* 设置子元素为绝对定位 */
		bottom: 0;
		/* 子元素定位到父元素的底部 */
		right: 0;
		/* 子元素定位到父元素的右边 */

	}

	.child-view_top {
		width: 40px;
		height: 22px;
		position: absolute;
		/* 设置子元素为绝对定位 */
		top: 10rpx;
		/* 子元素定位到父元素的底部 */
		left: 10rpx;
		/* 子元素定位到父元素的右边 */
	}

	.stateTextItem {
		color: #FFF;

		font-family: "Alibaba PuHuiTi";
		font-size: 10px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		/* 160% */
	}

	.personTextItem {
		display: inline-grid;
		text-align: center;
	}

	.nameItem {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}



	.contentItem {
		color: var(---, #929397);
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.margLeftPJ {
		margin-left: 20px;
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.orderListBg {
		border-radius: 2px;
		background: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

	}

	.itemImg {
		width: 50px;
		height: 50px;
		flex-shrink: 0;
		border-radius: 50%;
	}

	.itemOneText {
		margin-left: 20px;
		color: #040B29;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-weight: 700;
		line-height: 33px;
	}

	.itemTwoText {
		margin-left: 20px;
		color: #929397;
		font-feature-settings: 'liga' off, 'clig' off;
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-weight: 400;
		line-height: 33px;
	}

	.exchange-btn {
		background-image: linear-gradient(180deg, #FF9E44 2.7%, #FFBF84 100%);
		/* 设置按钮背景颜色 */
		color: white;
		/* 设置按钮文字颜色 */
		border: none;
		/* 去除边框 */
		/* 设置内边距 */
		border-radius: 25px;
		/* 设置按钮圆角 */
		cursor: pointer;
		/* 设置鼠标悬停时的光标形状 */


	}

	.btnView {
		padding: 20rpx;
		margin-top: -20rpx;
	}

	.btmBg {
		width: 100%;
		z-index: 100;
		background: #FFF;
		backdrop-filter: blur(10px);
		/* position: absolute;
		bottom: 0rpx;
		
		width: 100%;
		 */
	}

	.twoModeleClass {

		flex-wrap: wrap;
		column-count: 3;
		text-align: center;
		padding: 20rpx;
	}

	.textNomal {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-left: 30rpx;
	}

	.twoModeleItem {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.specificationsIndexActive {
		color: white;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		border-radius: 113px;
		background: var(--, #FF9E44);
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.specificationsIndexActiveNo {
		color: var(---, #929397);
		text-align: center;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.btmTextTitle {
		color: #3F2813;

		font-family: "Alibaba PuHuiTi";
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}

	.content {
		position: absolute;
		top: 100px;
		width: 100%;
		height: 100%;
		background: white;
	}
</style>